<template>
  <div>
    <a-card :bordered="false">
      <!--  #####################查询条件###################  -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="用户昵称">
                <a-input v-model="queryParam.nickName" placeholder="" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="手机号码">
                <a-input v-model="queryParam.mobile" placeholder=""/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="小程序">
                <a-select showSearch optionFilterProp="children" v-model="queryParam.customerId" :filterOption="filterOption">
                  <a-select-option v-for="item in editProps" :key="item.id">{{item.name}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button v-action:query type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <!--  #####################操作###################  -->
      <!--<div class="table-operator">
        <a-button v-action:add type="primary" icon="plus" @click="handleAdd()">新建</a-button>
      </div>-->
      <div class="table-operator">
        <a-button type="primary" :loading="loading" @click="exportExcell()">导出EXCEL</a-button>
      </div>

      <!--  #####################表格###################  -->
      <s-table ref="table" :columns="columns" :data="loadData">
        <span slot="fileUrl" slot-scope="text, record">
          <div class="dfhead">
            <img :src="text" alt="" style="width: 50px;height: auto;">
          </div>
        </span>
        <span slot="isAdmin" slot-scope="text,record">
          <a-switch checked-children="是" un-checked-children="否" :checked="text" @change="changeAdmin(record.id)" :loading="loading"/>
        </span>
        <span slot="gender" slot-scope="text,record">
          {{record.gender==2?'女':'男'}}
        </span>
        <span slot="action" slot-scope="text, record">
          <template>
            <a v-action:edit @click="handleEdit(record)">积分补录</a>
            <a-divider v-action:edit type="vertical" />
            <a v-action:edit @click="handleTrade(record)">支付记录</a>
            <a-divider v-action:edit type="vertical" />
            <a v-action:edit @click="handleOrder(record)">核销记录</a>
          </template>
        </span>
      </s-table>

      <!--  #####################打开的页面###################  -->
      <edit ref="createModal" :editProps="editProps" @ok="refresh"/>
    </a-card>
  </div>
</template>

<script>
  import {STable} from '@/components'
  import edit from './memberEdit'
  //import { selectAllCustomer } from '@/api/shop/customer'
  import {optionselect} from '@/api/mini/pic'
  import { selectPage, changeAdmin, exportExcel} from '@/api/member/member'

  /**
   * 组件
   */
  const components = {STable, edit}

  const columns = [
    {
      title: '微信头像',
      dataIndex: 'avatarUrl',
      scopedSlots: { customRender: 'fileUrl' }
    },
    {
      title: '微信昵称',
      dataIndex: 'nickName'
    },
    {
      title: '手机',
      dataIndex: 'mobile'
    },
    {
      title: '积分',
      dataIndex: 'integral',
      sorter: true
    },
    {
      title: '注册时间',
      dataIndex: 'createdTime'
    },
    {
      title: '支付宝头像',
      dataIndex: 'aliAvatarUrl',
      scopedSlots: { customRender: 'fileUrl' }
    },
    {
      title: '支付宝昵称',
      dataIndex: 'aliNickName'
    },
    {
      title: '推广员',
      dataIndex: 'userName'
    },
    {
      title: '性别',
      width: '50px',
      dataIndex: 'gender',
      scopedSlots: { customRender: 'gender' }
    },
    {
      title: '商户管理员',
      dataIndex: 'isAdmin',
      scopedSlots: { customRender: 'isAdmin' }
    },
    {
      title: '商圈名称',
      dataIndex: 'customerName'
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '250px',
      scopedSlots: { customRender: 'action' }
    }
  ]

  const statusMap = {
    false: {
      status: '#108ee9',
      text: '启用'
    },
    true: {
      status: '#f50',
      text: '禁用'
    }
  }

  /**
   * 数据
   */
  const data = function() {
    return {
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      columns,
      editProps: [],
      loading: false,

      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return selectPage(Object.assign(parameter, this.queryParam)).then(res => {
          return res.data
        })
      }
    }
  }

  const created = function () {
    optionselect().then(res => {
      if (res.code === 200) {
        this.editProps = res.data
      }
    })
  }

  /**
   * 过滤器
   */
  const filters = {
    statusFilter (status) {
      return statusMap[status].text
    },
    statusColorFilter (status) {
      return statusMap[status].status
    },
  }

  /**
   * 计算属性
   */
  const computed = {}

  /**
   * 侦听器
   */
  const watch = {}

  export default {
    data: data,
    components: components,
    created: created,
    filters: filters,
    computed: computed,
    watch: watch,
    /**
     * 方法
     */
    methods: {
      handleAdd() {
        this.$refs.createModal.add()
      },
      handleEdit(record) {
        this.$refs.createModal.edit(record)
      },
      handleTrade(record) {
        this.$router.push({ path: '/trade/tradeList', query: {memberId: record.id} })
      },
      handleOrder(record) {
        this.$router.push({ path: '/member/productList', query: {memberId: record.id} })
      },
      refresh(){
        this.$refs.table.refresh()
      },
      handleDel (record) {
        const _this = this
        this.$confirm({
          title: '警告',
          content: `真的要删除 ${record.name} 吗?`,
          okText: '删除',
          okType: 'danger',
          cancelText: '取消',
          onOk () {
            // 在这里调用删除接口
            del(record.id).then(res => {
              if (res.code === 200) {
                _this.$message.success(res.message)
                _this.$refs.table.refresh()
              }
              if (res.code === 500) {
                _this.$message.error(res.message)
              }
            })
          }
        })
      },
      filterOption (input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      },
      changeAdmin(id) {
        const that = this
        that.loading = true
        changeAdmin(id).then(res => {
          that.loading = false
          if (res.code === 200) {
            that.$refs.table.refresh()
          }
        })
      },
      exportExcell() {
        this.loading = true
        exportExcel(this.queryParam).then(res => {
          this.loading = false
          const link = document.createElement('a')
          let blob = new Blob([res], {type: 'application/vnd.ms-excel'});
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob);
          let num = ''
          for (let i = 0; i < 10; i++) {
            num += Math.ceil(Math.random() * 10)
          }
          link.setAttribute('download', '会员列表.xlsx')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        })
      }
    }
  }
</script>

<style scoped>
  .dfhead{
    width: 50px;
    height: 50px;
    background: url("../../assets/icons/dfhead.png") no-repeat center;
    background-size: 50px;
    border-radius: 25px;
    overflow: hidden;
  }
</style>
